<template>
  <div class="dash">
    <el-row :gutter="30" class="info">
      <el-col :span="18">
        <!-- 仓储管理员 -->
        <el-card class="admin">
          <img class="img-left" src="http://www-wms-java.itheima.net/img/dashboard-banner-left@2x.5afd2949.png" alt="">
          <img class="img-right" src="http://www-wms-java.itheima.net/img/dashboard-banner-right@2x.28195570.png" alt="">
          <img class="user-header" src="http://www-wms-java.itheima.net/img/avatar@2x.4f4a758f.png" alt="">
          <p class="user-title">仓储管理员</p>
          <p class="subject-title">我不是为了输赢，我就是认真！</p>
          <p class="subject-author">—— 罗永浩</p>
          <div class="site">
            <div class="title">北京总仓</div>
          </div>
        </el-card>
        <!-- 待办信息 -->
        <el-card class="list">
          <div class="title">待办信息</div>
          <el-row class="item-list">
            <el-col :span="8">
              <div class="item">
                <div class="icon">
                  <i class="el-icon-s-order"></i>
                </div>
                <div class="title">入库单</div>
                <div class="bottom">
                  <span class="span-label">新增</span>
                  <span class="span-value">8</span>
                  <span class="span-label">待审核</span>
                  <span class="span-value" style="color: rgb(0, 118, 255);">8</span>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="item">
                <div class="icon" style="background: rgb(255, 178, 0);">
                  <i class="el-icon-s-order"></i>
                </div>
                <div class="title">出库单</div>
                <div class="bottom">
                  <span class="span-label">新增</span>
                  <span class="span-value">6</span>
                  <span class="span-label">待审核</span>
                  <span class="span-value" style="color: rgb(255, 178, 0);">6</span>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="item">
                <div class="icon" style="background: rgb(255, 113, 0);">
                  <i class="el-icon-s-order"></i>
                </div>
                <div class="title">盘点单</div>
                <div class="bottom">
                  <span class="span-label">新增</span>
                  <span class="span-value">7</span>
                  <span class="span-label">待审核</span>
                  <span class="span-value" style="color: rgb(255, 113, 0);">7</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <!-- 通知/公告 -->
      <el-col :span="6">
        <el-card class="notice">
          <div class="title">通知/公告</div>
          <div class="item1">
            <div class="hr"></div>
            <div class="title">紧急盘点通知</div>
            <div class="time">2020.12.30 18:23:14</div>
          </div>
          <div class="item1">
            <div class="hr"></div>
            <div class="title">运维服务更新通知</div>
            <div class="time">2021.01.25 18:23:14</div>
          </div>
          <div class="item1">
            <div class="hr"></div>
            <div class="title">客户入库变更通知</div>
            <div class="time">2021.01.26 18:23:14</div>
          </div>
          <div class="item1">
            <div class="hr"></div>
            <div class="title">五一放假通知</div>
            <div class="time">2021.02.15 18:23:14</div>
          </div>
          <div class="item1">
            <div class="hr"></div>
            <div class="title">品达物流系统对接通知</div>
            <div class="time">2021.3.25 18:23:14</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 任务导航 -->
    <el-row class="task-info" style="margin-top: 20px;">
      <el-col>
        <el-card class="task">
          <div class="title">任务导航</div>
          <div class="item-list">
            <div class="item">
              <div class="icon">
                <i class="el-icon-s-opportunity"></i>
              </div>
              <div class="title">收货任务</div>
            </div>
            <div class="item">
              <div class="icon" style="background: rgb(82, 212, 243);">
                <i class="el-icon-s-opportunity"></i>
              </div>
              <div class="title">上架任务</div>
            </div>
            <div class="item">
              <div class="icon" style="background: rgb(255, 113, 0);">
                <i class="el-icon-s-opportunity"></i>
              </div>
              <div class="title">盘点任务</div>
            </div>
            <div class="item">
              <div class="icon" style="background: rgb(255, 96, 158);">
                <i class="el-icon-s-opportunity"></i>
              </div>
              <div class="title">拣货任务</div>
            </div>
            <div class="item">
              <div class="icon" style="background: rgb(255, 178, 0);">
                <i class="el-icon-s-opportunity"></i>
              </div>
              <div class="title">交接任务</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 入库/出库信息 -->
    <el-row class="warehouse-info">
      <el-col>
        <el-card>
          <!-- 标题 -->
          <el-row>
            <el-col :span="6">
              <div class="subject">入库/出库信息</div>
            </el-col>
            <el-col :span="18" style="text-align:right">
              <el-radio-group v-model="radio">
                <el-radio-button label="1">本周</el-radio-button>
                <el-radio-button label="2">本月</el-radio-button>
                <el-radio-button label="3">全年</el-radio-button>
              </el-radio-group>
            </el-col>
          </el-row>
          <!-- echarts -->
          <div class="chart" ref="chart">
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="libs">
      <el-col :span="8">
        <el-card class="user-card">
          <div class="header">库存使用情况</div>
          <div class="leftChart" ref="leftChart"></div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="libs-card">
          <div class="header">库区使用情况</div>
          <div class="rightChart" ref="rightChart"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 完整加载过程
const echarts = require('echarts')
export default {
  data () {
    return {
      radio: 1
    }
  },
  mounted () {
    this.initbarChart()
    this.initLeftChart()
    this.initRightChart()
  },
  methods: {
    // 入库/出库信息
    initbarChart () {
      // 得到图表实例
      const myChart = echarts.init(this.$refs.chart) // 得到图表实例
      const option = {
        color: ['#ff7100', '#ffb200'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          bottom: '3%'
        },
        grid: {
          y: 45,
          x2: 25,
          y2: 40,
          left: '3%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            axisTick: {
              alignWithLabel: true,
              show: false
            },
            axisLabel: {
              textStyle: { // 改变xy轴上文字的颜色
                color: '#4d4545'
              }
            },
            axisLine: {
              lineStyle: { // 改变xy轴线条的颜色
                color: '#dddddd'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
          }
        ],
        series: [
          {
            name: '入库',
            type: 'bar',
            barGap: 0,
            barWidth: '40%',
            data: [503, 879, 872, 312, 229, 846, 0]
          },
          {
            name: '出库',
            type: 'bar',
            barWidth: '40%',
            data: [189, 896, 985, 538, 150, 59, 0]
          }
        ]
      }
      myChart.setOption(option)
    },
    // 库存使用情况
    initLeftChart () {
      const myChart = echarts.init(this.$refs.leftChart)
      const option = {
        color: ['#e4dbda', '#ffaa00'],
        tooltip: {
          trigger: 'item',
          formatter: '{b}：{d}%'
        },
        series: [
          {
            type: 'pie',
            radius: ['60%', '86%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            left: '20%',
            top: '30%',
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: 'bold',
                color: ['#e4dbda', '#ffaa00']
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 60, name: '可用库存' },
              { value: 40, name: '冻结库存' }
            ]
          }
        ]
      }
      myChart.setOption(option)
    },
    // 库区使用情况
    initRightChart () {
      const myChart = echarts.init(this.$refs.rightChart)
      const option = {
        color: ['#0076ff', '#52d4f3', '#5d7092', '#ffb200', '#ff7100'],
        tooltip: {
          trigger: 'item',
          formatter: '{b}：{d}%'
        },
        legend: {
          orient: 'vertical',
          top: 'center',
          left: '55%',
          itemGap: 25,
          borderRadius: 100
        },
        series: [
          {
            type: 'pie',
            left: '-40%',
            radius: '50%',
            data: [
              { value: 348, name: '拣货区' },
              { value: 487, name: '出库区' },
              { value: 677, name: '暂存库区' },
              { value: 126, name: '进货暂存区' },
              { value: 289, name: '出货暂存区' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.info {
  height: 450px;
  .admin {
    position: relative;
    width: 100%;
    height: 148px;
    background: linear-gradient(270deg,#ffc771,#ffa634);
    box-shadow: 0 0 6px 0 rgb(188 151 69 / 12%);
    border-radius: 12px;
    .img-left {
      position: absolute;
      top: 0;
      left: 0;
      height: 148px;
    }
    .img-right {
      position: absolute;
      top: 0;
      right: 0;
      height: 148px;
    }
    .user-header {
      position: absolute;
      top: 31px;
      left: 43px;
      height: 62px;
    }
    .user-title {
      position: absolute;
      left: 36px;
      bottom: 5px;
      font-size: 16px;
      font-family: PingFangSC-Medium,PingFang SC;
      font-weight: 500;
      color: #332929;
      line-height: 22px;
    }
    .subject-title {
      position: absolute;
      font-family: PingFangSC-Medium,PingFang SC;
      font-weight: 500;
      color: #fff;
      line-height: 25px;
      top: 20px;
      left: 200px;
      font-size: 18px;
    }
    .subject-author {
      position: absolute;
      font-family: PingFangSC-Medium,PingFang SC;
      font-weight: 500;
      color: #fff;
      line-height: 25px;
      top: 60px;
      left: 400px;
      font-size: 16px;
    }
    .site {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 147px;
      height: 40px;
      background: #f8f5f5;
      border-radius: 6px;
      opacity: .79;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      .title {
        font-size: 14px;
        font-weight: 500;
        color: #332929;
      }
    }
  }
  .list {
    width: 100%;
    height: 282px;
    background: #fff;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    border-radius: 12px;
    margin-top: 20px;
    .title {
      font-size: 16px;
      font-family: PingFangSC-Semibold,PingFang SC;
      font-weight: 600;
      color: #332929;
      line-height: 22px;
    }
    .item-list {
      margin-top: 20px;
      margin-left: -15px;
      .el-col {
        padding-left: 15px;
        padding-right: 15px;
        .item {
          position: relative;
          height: 186px;
          background: #fbf7f7;
          border-radius: 8px;
          padding: 20px;
          cursor: pointer;
          border: 1px solid rgba(0,0,0,0);
          .icon {
            width: 49px;
            height: 49px;
            background: #0076ff;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            i {
              font-size: 32px;
              color: #f8f5f5;
            }
          }
          .title {
            position: absolute;
            top: 34px;
            left: 85px;
            font-size: 16px;
            font-family: PingFangSC-Medium,PingFang SC;
            font-weight: 500;
            color: #332929;
            line-height: 22px;
          }
          .bottom {
            position: absolute;
            bottom: 20px;
            .span-label {
              font-size: 14px;
              font-family: PingFangSC-Regular,PingFang SC;
              font-weight: 400;
              color: #887e7e;
              margin-right: 10px;
              vertical-align: super;
            }
            .span-value {
              font-size: 36px;
              font-family: DIN-Medium,DIN;
              font-weight: 500;
              color: #332929;
              margin-right: 20px;
              color: #332929;
            }
          }
        }
      }
    }
  }
  .notice {
    height: 451px;
    background: #fff;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    border-radius: 12px;
    padding: 10px;
    .title {
      font-size: 16px;
      font-family: PingFangSC-Semibold,PingFang SC;
      font-weight: 600;
      color: #332929;
      line-height: 22px;
    }
    .item1 {
      margin-top: 15px;
      .hr {
        width: 201px;
        height: 1px;
        background-color: #f5efee;
      }
      .title {
        width: 195px;
        height: 18px;
        font-size: 13px;
        font-family: PingFangSC-Regular,PingFang SC;
        font-weight: 400;
        color: #332929;
        line-height: 18px;
        margin-top: 15px;
      }
      .time {
        width: 115px;
        height: 17px;
        font-size: 12px;
        font-family: PingFangSC-Regular,PingFang SC;
        font-weight: 400;
        color: #887e7e;
        line-height: 17px;
        margin-top: 10px;
      }
    }
  }
}
.task-info {
  .task {
    width: 100%;
    height: 188px;
    background: #fff;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    border-radius: 12px;
    padding: 5px;
    .title {
      font-size: 16px;
      font-family: PingFangSC-Semibold,PingFang SC;
      font-weight: 600;
      color: #332929;
      line-height: 22px;
    }
    .item-list {
      margin-top: 20px;
      display: flex;
      .item {
        margin-left: 15px;
        margin-right: 15px;
        flex: 1;
        position: relative;
        width: 100%;
        height: 93px;
        background: #fbf7f7;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        border: 1px solid rgba(0,0,0,0);
        justify-content: space-evenly;
        &:first-child {
          margin-left: 0;
        }
      }
      .icon {
        width: 50px;
        height: 50px;
        background: #0076ff;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        i {
          font-size: 28px;
          color: #f8f5f5;
        }
      }
      .title {
        font-size: 16px;
        font-family: PingFangSC-Medium,PingFang SC;
        font-weight: 500;
        color: #332929;
        line-height: 22px;
      }
    }
  }

}
.warehouse-info {
  margin-top: 20px;
  .el-col {
    .el-card {
      height: 500px;
      background: #fff;
      box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
      border-radius: 12px;
      padding: 5px;
      .el-row {
        .el-col {
          .subject {
            font-size: 16px;
            font-family: PingFangSC-Semibold,PingFang SC;
            font-weight: 600;
            color: #332929;
            line-height: 22px;
          }
        }
      }
      .chart {
        position: relative;
        width: 1183px;
        height: 430px;
        padding: 0px;
        margin: 0px;
        border-width: 0px;
      }
    }
  }
}
.libs {
  margin-top: 20px;
  .user-card {
    height: 354px;
    background: #fff;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    padding: 5px;
    margin-right: 30px;
    .header {
      font-size: 16px;
      font-family: PingFangSC-Semibold,PingFang SC;
      font-weight: 600;
      color: #332929;
      line-height: 22px;
    }
    .leftChart {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 311px;
      height: 280px;
      user-select: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      padding: 0px;
      margin: 0px;
      border-width: 0px;
    }
  }
  .libs-card {
    height: 354px;
    background: #fff;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    padding: 5px;
    .header {
      font-size: 16px;
      font-family: PingFangSC-Semibold,PingFang SC;
      font-weight: 600;
      color: #332929;
      line-height: 22px;
    }
    .rightChart {
      position: absolute;
      right: 0px;
      top: 50px;
      width: 792px;
      height: 280px;
      user-select: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      padding: 0px;
      margin: 0px;
      border-width: 0px;
    }
  }
}
</style>
